<template>
	<MyPage title="选择城市" :isback="true">
		<view slot="gBody">
			<view
				class="list-cell"
				v-for="(child, childIndex) in cityList"
				:key="childIndex"
				@click="cityClidk(child)"
			>
				{{child.value}}
			</view>
			<!-- <u-index-list :scrollTop="scrollTop" class="body">
				<view v-for="(item, index) in indexList" :key="index">
					<u-index-anchor :index="item" />
					<view
						class="list-cell"
						v-for="(child, childIndex) in cityList"
						:key="childIndex"
					>
						{{child.value}}
					</view>
				</view>
			</u-index-list> -->
		</view>
	</MyPage>
</template>		
 	
<script>
 
import { getCityList } from '@/api/compute.js'
export default {
 
	data() {
		return {
			scrollTop: 0,
			indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
			cityList: [],
			myCityObj: {key:"1", value:"北京"},
			fromUrl: ''
		}
	},
	onLoad(option) {
		this.fromUrl = option.fromUrl?option.fromUrl:'/index/index';
		// 获取城市列表
		this.getCityListFun();
	},
	methods: {
		// 获取城市列表
		getCityListFun(){
			getCityList().then(res=>{
				this.cityList = res.citys;
			}).catch(err=>{
				uni.showToast({
					title: err.msg,
					icon:'none'
				})
			});
		},
		// 点击选择城市
		cityClidk(item){
			console.log('////////////////')
			console.log(item)
			this.$store.commit('SELECT_CITY', item);
			this.$utils.switchTab(this.fromUrl);
		}
	}
}
</script>

<style lang="scss" scoped>
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 15px 40rpx;
	overflow: hidden;
	color: #323233;
	font-size: 30rpx;
	background-color: #fff;
	border-bottom: 1px #eee solid;
}
</style>